<template>
    <div class="Notice" :style="{background: list.BgColor,color: list.FontColor,}">
        <div class="NoticeIcon">
            <i class="el-icon-message-solid" :style="{'font-size': '20px',color:list.FontColor}"></i>
        </div>
        <div class="textBox">
            <transition name="slide">
                <p class="text TextAuto" :key="text.id">
                    {{text.val.name}}
                </p>
            </transition>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Notice',
        props: ['data'],
        data() {
            return {
                list: {},
                textArr: [
                    // { name: '1 第一条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌' },
                ],
                number: 0
            }
        },
        watch: {
            'list.data'(val) {
                // console.log(val);
                this.number = 0
                this.text = {
                    id: this.number,
                    val: this.textArr[this.number]
                }
                this.textArr = val
            },
        },
        computed: {
            text() {
                return {
                    id: this.number,
                    val: this.textArr[this.number]
                }
            }
        },
        created() {
            this.list = this.data
            this.textArr = this.list.data
        },
        mounted() {

            this.startMove()
        },
        methods: {
            TabsChange(row) {
                this.current = row
            },
            startMove() {
                // eslint-disable-next-line
                let timer = setTimeout(() => {
                    if (this.number === this.textArr.length - 1) {
                        this.number = 0;
                    } else {
                        this.number += 1;
                    }
                    this.startMove();
                }, this.list.number); // 滚动不需要停顿则将2000改成动画持续时间
            },
        },
    }
</script>

<style lang="less" scoped>
    .TextAuto {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .Notice {
        display: flex;
        align-items: center;
        padding: 7px 9px;
    }

    .NoticeIcon {
        margin-right: 10px;
    }

    .textBox {
        width: 100%;
        height: 30px;
        /* margin: 0 auto; */
        overflow: hidden;
        position: relative;
        /* display: flex; */
        /* align-items: center; */
        /* text-align: center; */
    }

    .text {
        width: 100%;
        position: absolute;
        /* bottom: 0; */
        height: 30px;
        line-height: 30px;
    }

    .slide-enter-active,
    .slide-leave-active {
        transition: all 0.5s linear;
    }

    .slide-enter {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }

    .slide-leave-to {
        transform: translateY(-20px) scale(0.8);
        opacity: 0;
    }
</style>